<template>
  <div>
    <Breadcrumb>
      <BreadcrumbItem>首页</BreadcrumbItem>
      <BreadcrumbItem>活动管理</BreadcrumbItem>
    </Breadcrumb>
    <Form ref="formInline" :model="request" inline>
      <FormItem>
        活动编号：<Input
        type="text"
        v-model="params.order_id"
        clearable
        placeholder="活动编号"
        style="width: 120px"
      />
      </FormItem>
      <FormItem>
        设备编号: <Input
        type="text"
        v-model="params.order_id"
        clearable
        placeholder="设备编号"
        style="width: 120px"
      />
      </FormItem>
      <FormItem>
        时间: <DatePicker
        type="daterange"
        @on-change="timechange"
        :transfer="true"
        placement="bottom-end"
        placeholder="请选择开始-结束时间"
        style="width: 200px"
      ></DatePicker>
      </FormItem>
      <FormItem>
        <Button type="primary" @click="search" style="margin-right: 10px"
        >搜索</Button
        >
      </FormItem>
    </Form>
    <div>
        <Tabs value="name1">
          <TabPane label="异物放入活动" name="name1">
            <Form ref="formInline" :model="request" inline>
              <Table border :columns="columns2" :data="data2"></Table>
            </Form>
          </TabPane>
          <TabPane label="识别无消费活动" name="name2">
            <Form ref="formInline" :model="request" inline>
              <Table border :columns="columns3" :data="data3">
                <template slot-scope="{ row }" slot="option">
                  <Button
                    type="success"
                    size="small"
                    style="margin-right: 5px"
                    v-hasPermission="['37']"
                    @click="findVideo()"
                  >查看视频</Button>
                </template>

              </Table>
            </Form>
          </TabPane>
        </Tabs>
    </div>

    <div style="display: flex; justify-content: center; margin-top: 24px">
      <Page style="display: flex;justify-content: center;margin-top: 24px;" :total="page.count" :page-size="20" :page-size-opts="[20,30,40,50,100]" show-elevator show-sizer show-total
            @on-change="handleCurrentChange" @on-page-size-change="handleSizeChange" />
      <Modal v-model="modal3"    :mask-closable="false" width="1000" >
        <Form :label-width="110">
          <div><h4 class="door_device">查看视频2109261638197375</h4></div>
<!--          此处是不是应该使用template下定义slot来写,此处先不改-->
          <div>这里是一个视频</div>
        </Form>
      </Modal>
    </div>

  </div>
</template>

<script>
  export default {
    data() {
      return {
        request: {
          name: '',
          loading: false
        },
        columns2: [
          {
            title: '序号',
            key: 'id'
          },
          {
            title: '活动id',
            key: 'activity_id'
          },
          {
            title: '创建时间',
            key: 'create_time'
          },
          {
            title: '设备编号',
            key: 'device_nums'
          },
          {
            title: '手机号',
            key: 'phone'
          },
          {
            title: '订单编号',
            key: 'order_id'
          },
          {
            title: '状态',
            key: 'status'
          },
          {
            title: '来源',
            key: 'origin'
          },
          {
            title: '操作',
            key: 'option'
          }
        ],
        // data2:[],

        columns3: [
          {
            title: '序号',
            key: 'id'
          },
          {
            title: '活动id',
            key: 'activity_id'
          },
          {
            title: '创建时间',
            key: 'create_time'
          },
          {
            title: '设备编号',
            key: 'device_nums'
          },
          {
            title: '手机号',
            key: 'phone'
          },
          {
            title: '订单编号',
            key: 'order_id'
          },
          {
            title: '状态',
            key: 'status'
          },
          {
            title: '来源',
            key: 'origin'
          },
          {
            title: '操作',
            slot: 'option'
          }
        ],
        data2: [
          {
            id:1,
            activity_id:'1234',
            create_time:'2020-1-2',
            device_nums:'123',
            phone:'1234567890',
            order_id:'12345',
            status:'启用中',
            origin:'商家',
            option:'123'
          }

        ],
        data3: [
          {
            id:1,
            activity_id:'01234',
            create_time:'2020-1-21',
            device_nums:'1232',
            phone:'1234567890',
            order_id:'123456',
            status:'未启用',
            origin:'买家'
          }

        ],
        params: {
          device_time: [],
          status: 1,
          user_id: "",
          order_id: "",
          activity_id: "",
          page: 1,
          limit: 10,
        },
        total: 0,
        page: {},
        height: this.$store.state.height,
        modal1: false,
        modal2: false,
        modal3: false,
        data1: [
          {
            id: 1,
            title: "机器组3",
          },
          {
            id: 2,
            title: "机器组4",
          },
        ],
        request: {
          device_number: "",
          page: 1,
        },
        tableData: [],
        role_id:null,
      };
    },
    mounted() {

      this.init();
    },
    methods: {
      findVideo(){
        this.cancel();
        this.modal3 = true
        this.allocated = [];
        this.undistributed = [];
        if(this.infoID == 6){
          console.log('6')
          this.axios.post("device/getAllDev").then(res => {
            if (res.code == 1) {
              this.allocated = res.data.allocated;
              this.undistributed= res.data.undistributed;
            }
          });

        }
      },
      init(){
        this.axios.post('shop/shop_list').then((res) => {
          if (res.code === 1) {
            console.log(res)
            this.total = res.data.count
            this.tableData = res.data.list
          }
        })
      },
      // goDel(id) {
      //   this.$router.push({ path: "/order/detail", query: { id } });
      // },
      search() {
        this.params.page = 1;
        this.init();
      },
      confirm() {
        this.modal1 = false;
        this.$Message.success("保存成功！");
        this.cancel();
      },
      cancel() {},
      add() {
        this.modal1 = true;
      },
      setStatus(id, status) {
        var text = "确定要" + (status == 1 ? "启用" : "禁用") + "此机器组么？";
        this.$Modal.confirm({
          title: text,
          onOk: () => {
            this.$Message.success("操作成功");
          },
          onCancel: () => {},
        });
      },
      timechange(val) {
        console.log(val);
      },
      handleSizeChange(val) {
        this.request.page = 1;
        this.request.limit = val;
        this.lists();
      },
      handleCurrentChange(val) {
        this.params.page = val;
        this.init();
      },
      // 测试门店列表
      lists () {
        this.loading = true
        // console.log( JSON.parse(this.astgo.getItem(this.Pn + "info")).role_id )
        // this.request.id = JSON.parse(this.astgo.getItem(this.Pn + "info")).role_id;
        this.axios.post('shop/shop_list', this.request).then(res => {
          if (res.code === 1) {
            this.loading = false
            this.tableData = res.data.list
            this.page.count = res.data.count // 总条数
            this.page.curPage = res.data.curPage // 当前页
            this.page.countPage = res.data.countPage // 总页数
            console.log('this.tableData', this.tableData)
          }
        })
      },




      changeUserMsg(item, type) {
        console.log("现在的type", type);
        this.type = type;
        if (type == 1) {
          this.title = "编辑";
          this.addformInline.title = item.title;
          this.addformInline.remarks = item.remarks;
          this.addformInline.id = item.id;
          this.addUserOrChange = true;

        } else if (type == 2) {

          if (this.addformInline.id) {
            this.addformInline.id =null;
          }

          this.title = "添加";
          this.$Modal.confirm({
            title: "确定要添加角色？",
            onOk: () => {
              this.addUserOrChange = true;
            },
            onCancel: () => {}
          });
        }
      },
    },
  };
</script>

<style>
  *{
    margin: 0;
    padding: 0;
  }
  .door_device{
    position: relative;
    top: -20px;
  }
</style>
